<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<!-- 引入layui的样式文件 -->
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<!-- 引入layui的脚本文件 -->
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 条件搜索区 -->
	<form class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">名字</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="name" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">开始日期</label>
				<div class="layui-input-inline" style="width: 100px;">
				  <input type="text" name="mindate" class="layui-input" id="test1">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">结束日期</label>
				<div class="layui-input-inline" style="width: 100px;">
				  <input type="text" name="maxdate" class="layui-input" id="test2">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="newsTypeId" class="newsType">
						<option value="">--请选择--</option>
					</select>
				</div>
			</div>
			<button class="layui-btn" lay-submit lay-filter="souBtn"><i class="layui-icon layui-icon-search"></i>搜索</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</form>


	<!-- 表格的容器 -->
	<table id="demo" lay-filter="test"></table>

	<!-- 工具栏模板：作为头部的工具栏 -->
	<script type="text/html" id="toolbarDemo1">
			<div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
		  </div>
		</script>

	<!-- 工具栏模板：作为行内的工具栏 -->
	<script type="text/html" id="toolbarDemo2">
			<div class="layui-btn-container">
		     <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
			 <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
		   </div>
		 </script>
	<!-- 添加弹窗 -->
	<div id="addDiv" style="display: none;">
		<form class="layui-form" id="addForm">
			<div class="layui-form-item">
				<label class="layui-form-label">新闻标题</label>
				<div class="layui-input-inline">
					<input type="text" name="title" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
					<label class="layui-form-label">新闻内容</label>
					<div class="layui-input-inline">
						<textarea name="content" placeholder="请输入" class="layui-textarea"></textarea>
					</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">新闻类型</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="typeId" class="newsType">
						<option value="">--请选择--</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻日期</label>
				<div class="layui-inline"> 
				  <input type="text" name="date" class="layui-input" id="addtest">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示首页</label>
				<div class="layui-input-inline">
					<input type="radio" name="isShow" value="是" title="是"> <input
						type="radio" name="isShow" value="否" title="否">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtnAdd">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>

		</form>
	</div>
	<!-- 添加弹窗结束 -->

	<!-- 修改的弹窗 -->
	<div id="updateDiv" style="display: none;">
		<form class="layui-form" lay-filter="updateForm" id="updateForm">
			<div class="layui-form-item">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻标题</label>
				<div class="layui-input-inline">
					<input type="text" name="title" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
					<label class="layui-form-label">新闻内容</label>
					<div class="layui-input-inline">
						<textarea name="content" placeholder="请输入" class="layui-textarea"></textarea>
					</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">新闻类型</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="typeId" class="newsType">
						<option value="">--请选择--</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻日期</label>
				<div class="layui-inline"> 
				  <input type="text" name="date" class="layui-input" id="updatetest">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示首页</label>
				<div class="layui-input-inline">
					<input type="radio" name="isShow" value="是" title="是"> <input
						type="radio" name="isShow" value="否" title="否">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtnUpdate">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改的弹窗结束 -->


	<script>
		layui.use([ 'table', 'form', 'upload','laydate' ], function() {
			var table = layui.table;
			var $ = layui.$;
			var form = layui.form;
			var upload = layui.upload;
			var laydate = layui.laydate;

			/* 表格渲染 */
			table.render({
				elem : '#demo',
				url : 'NewsServletAdmin?method=getNewsList', //数据接口
				toolbar : '#toolbarDemo1',
				method : "post", //请求方式
				page : true, //开启分页
				id : "idtest",
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',
					width : 80,
				}, {
					field : 'title',
					title : '新闻标题',
					width : 100,
				}, {
					field : 'content',
					title : '新闻内容',
					width : 100,
				}, {
					field : 'typeId',
					title : '产品类型Id',
					width : 120,
				}, {
					field : 'name',
					title : '产品类型名称',
					width : 120,
				}, {
					field : 'date',
					title : '日期时间',
					width : 180,
				}, {
					field : 'isShow',
					title : '是否展示首页',
					width : 120,
				}, {
					title : '操作',
					toolbar : '#toolbarDemo2'
				} ] ]
			});
			//表格渲染结束

			//监听头部工具栏---toolbar
			table.on('toolbar(test)', function(obj) {
				switch (obj.event) {
				case 'add':
					layer.open({
						type : 1,
						shadeClose : true,
						area : [ '500px', '400px' ],
						content : $("#addDiv")
					//其他网页的地址
					});
					break;
				}
				;
			});//监听头部工具栏---toolbar----end

			//监听行内工具栏----tool
			table.on('tool(test)', function(obj) {
				var data = obj.data; //获得当前行数据
				switch (obj.event) {
				case 'update':
					layer.msg('编辑');
					console.log(data) //在控制台打印了当前行的数据
					//给表单赋值
					form.val("updateForm", data);

					//弹出窗口
					layer.open({
						type : 1,
						shadeClose : true,
						area : [ '500px', '400px' ],
						content : $('#updateDiv')
					//其他网页的地址
					});
					break;
				case 'delete':
					console.log(data);
					layer.confirm('要删除的用户id是' + data.id, function(index) {
						obj.del();
						layer.close(index);
						//向服务端发送删除指令
						$.post("NewsServletAdmin?method=delNews", {
							"id" : data.id
						}, function(res) {
							layer.msg(res.msg);
						}, "json")
					});
					break;
				}
				;
			});//监听行内工具栏----tool---end

			//监听表单提交----添加
			form.on('submit(subBtnAdd)', function(data) {
				var url = "NewsServletAdmin?method=insertNews";//请求地址
				var str = $("#addForm").serialize();//请求参数,表单中的数据,serialize序列化
				console.log(str);// 名=值&名=值
				//ajax请求服务器,判断结果
				$.post(url, str, function(res) {
					console.log(res);
					if (res.code == 0) {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							layer.closeAll();//关闭所有窗口
							table.reload('idtest', {})//表格重载
						})
					}
				}, "json")

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});//监听表单提交----添加end
			
			//日期控件----添加
			laydate.render({
			    elem: '#addtest' //指定元素
			  });

			//监听表单提交----修改
			form.on('submit(subBtnUpdate)', function(data) {
				var url = "NewsServletAdmin?method=updateNews"; //请求地址
				var str = $("#updateForm").serialize(); //请求参数,表单中的数据,serialize序列化
				//ajax请求服务器,判断结果
				$.post(url, str, function(res) {
					console.log(res);
					if (res.code == 0) {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							layer.closeAll();//关闭所有窗口
							table.reload('idtest', {})//表格重载
						})
					}
				}, "json")
				return false;
			});//监听表单提交----修改end
			
			//日期控件----修改
			laydate.render({
			    elem: '#updatetest' //指定元素
			  });

			//监听表单提交----查询
			form.on('submit(souBtn)', function(data) {
				table.reload('idtest',{where:data.field})
				return false;
			});//监听表单提交----查询end
			
			//异步请求 获取 产品类型
			//1.ajax请求服务器获取产品类型列表
			$.post("NewsTypServletAdmin?method=getList",function(res){
				console.log(res);
				if(res.code==0){
					//2.讲获取的数据渲染在下拉 列表
					for(var i=0;i<res.data.length;i++){
						$(".newsType").append("<option value='"+res.data[i].id+"'>"+res.data[i].name+"</option>")
					}
					//3刷新Select  重新渲染
					form.render('select');
				}
			},"json")
			
			
			
			//日期范围选择
			laydate.render({ 
			  elem: '#test1'
			});
			//日期范围选择
			laydate.render({ 
			  elem: '#test2'
			});
			
		});
	</script>

</body>
</html>